<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script type="text/x-template" id="a-temp">
        <div>
            <h1>第三个vue实例：{{ info }}</h1>
            <input type="text" v-model="info">
        </div>
    </script>
</head>
<body>
    <hr style="border-color: brown;">
    <div id="app" style="border: 1px solid #cccccc;">
        <h5>vue实例对应的页面容器区域</h5>
        <p>msg:{{ msg }}</p>
    </div>
    <hr style="border-color: brown;">
    <br>

    <hr style="border-color: brown;">
    <p id="root"></p>
    <hr style="border-color: brown;">
    <br>

    <hr style="border-color: brown;">
    <p id="a"></p>
    <!-- <br><======<br> -->
    <!-- <div id="a-temp" style="display: none;">
        <div>
            <h1>第三个vue实例：{{ info }}</h1>
            <input type="text" v-model="info">
        </div>
    </div> -->
    <hr style="border-color: brown;">
    <br>

    <hr style="border-color: brown;">
    <p id="b"></p>
    <template id="b-temp">
        <div>
            <h1>第四个vue实例：{{ info }}</h1>
            <input type="text" v-model="info">
        </div>
    </template>
    <hr style="border-color: brown;">
</body>
<script>
    // el 的功能
    //     + 描述当前vue实例对应的页面结构
    //     + 为vue实例构建的容器对象提供页面的位置描述

    // template 属性 - 为当前vue实例提供页面结构的描述代码 - 不能定义所在页面位置描述
    //     取值 string : 符合HTML标签结构的字符串代码
    //     取值 ElementSelect : 通过选择器指定 template的模板结构 
    //                          将选择器指定的 模板的内部代码作为 当前vue 实例的容器根节点
    let vm = new Vue({
        // el:"#app",

        template:"<h1>测试模板:{{ msg }}</h1>",
        data:{
            msg:"msg变量"
        }
        
    });
    console.log(vm.$el);
    vm.$mount();  // 只完成实例渲染 不完成页面挂载 - 空渲染
    console.log(vm.$el);
    // document.body.appendChild( vm.$el );

    new Vue({
        // 当一个实例中 同时出现 el 和 template 时
        //   此时的el 只用于描述页面的位置信息
        //   而实例模板由 template 属性提供
        el:"#root",
        // 实例的容器构建 有且仅有一个 根节点元素
        // template:`
        //     <h1 style='color:red'>测试模板:{{ msg }}</h1>
        //     <input type='text' v-model='msg'>
        // `,
        template:`
            <div>
                <h1 style='color:red'>测试模板:{{ msg }}</h1>
                <input type='text' v-model='msg'>
            </div>
        `,
        data:{
            msg:"msg变量"
        }
    })

    new Vue({
        el:"#a",
        template:"#a-temp",
        data:{
            info:"info变量"
        }
    })

    new Vue({
        el:"#b",
        template:"#b-temp",
        data:{
            info:"info变量"
        }
    })
</script>
</html>